<template>
    <div class="promo-container">
        <div class="header">
            <h2>规则说明：</h2>
            <div class="remark">
                <p>申请成为推广员，请详细阅读并遵守以下内容：</p>
                <p>1.详细阅读并遵守<a class="agree" href="">《推广员申请协议》</a></p>
                <p>2.一旦您提交申请，即视为您同意本协议!</p>
            </div>
        </div>

        <div class="form">
            <div class="group">
                <el-input placeholder="选择性填写，可留空(8位)" v-model="form.code" clearable>
                    <template slot="prepend">邀请代码</template>
                </el-input>
            </div>

            <div class="group">
                <el-input placeholder="请输入身份证真实姓名" v-model="form.truename" clearable>
                    <template slot="prepend">真实姓名</template>
                </el-input>
            </div>

            <div class="group">
                <el-input placeholder="188 **** **** (11位)" v-model="form.phone" clearable>
                    <template slot="prepend">手机号码</template>
                </el-input>
            </div>

            <div class="group">
                <el-input placeholder="请输入身份证号（18位）" v-model="form.idcard" clearable>
                    <template slot="prepend">身份证号</template>
                </el-input>
            </div>

            <div class="group">
                <el-input placeholder="上传身份证人像面" v-model="form.idcardimg1" :disabled="false">
                    <template slot="prepend">身份证(A</template>
                    <template slot="append"></template>
                </el-input>
            </div>
            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="form.idcardimg1" :src="form.idcardimg1" class="avatar">
                <i v-else class="el-icon-camera-solid avatar-uploader-icon"></i>
            </el-upload>

            <div class="group">
                <el-input placeholder="上传身份证国徽面" v-model="form.idcardimg2" :disabled="true">
                    <template slot="prepend">身份证(B</template>
                    <template slot="append"></template>
                </el-input>
            </div>
            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="form.idcardimg2" :src="form.idcardimg2" class="avatar">
                <i v-else class="el-icon-camera-solid avatar-uploader-icon"></i>
            </el-upload>

            <div class="group">
                <el-row>
                    <el-button type="primary">提交申请</el-button>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    code: '',
                    truename: '',
                    mobile: '',
                    idcard: '',
                    idcardimg1: '',
                    idcardimg2: ''
                }
            };
        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
    };
</script>

<style>
    .el-input-group__append,
    .el-input-group__prepend {
        text-align: right;
        width: 80px;
        padding: 0;
        background-color: transparent;
        border: none;
        font-size: var(--font-sm-size);
    }

    .el-form-item__label {
        font-size: var(--font-sm-size);
    }

    .el-input__inner {
        font-size: var(--font-sm-size);
        border-radius: 0;
        border: none;
    }

    .el-input.is-disabled .el-input__inner {
        background-color: transparent;
    }
</style>

<style scoped>
    .promo-container {
        padding: 15px 20px;
        background-color: #fff;
        margin-bottom: 50px;
    }

    .header {
        margin-bottom: 20px;
        background: #fef0f0;
        padding: 5px 15px;
        border-radius: 8px;
    }

    .header a.agree,
    .header h2 {
        color: var(--color-red);
    }

    .header a.agree {
        text-decoration: none;
        cursor: pointer;
    }

    .header .remark {
        text-indent: 2;
        padding-left: 24px;
    }

    .header p {
        color: var(--color-mdjor);
        font-size: var(--font-sm-size);
        font-weight: var(--font-md-weight);
        line-height: 25px;
    }

    .form .group {
        margin-bottom: 10px;
        border-bottom: 1px solid var(--border-line);
    }

    .form .el-button {
        width: 100%;
    }

    .avatar-uploader {
        border-radius: 8px;
        margin-left: 97px;
        margin-bottom: 10px;
    }

    .avatar-uploader .avatar-uploader-icon {
        padding: 12px;
        border: 1px dotted var(--color-mdjor);
        border-radius: 8px;
        color: var(--color-mdjor);
        font-size: 24px;
    }

    .avatar-uploader img {
        width: 100%;
    }
</style>